<template>
  <div class="tmpl">
    <table>
      <tr>
        <th style="width:30px;">序号</th>
        <th style="width:90px;">安全控制点</th>
        <th style="width:250px;">测评指标</th>
        <th>结果记录</th>
        <th>安全问题</th>
        <th>安全建议</th>
        <th style="min-width:60px;">严重程度</th>
        <th style="width:115px;">操作</th>
      </tr>
      <template v-for="(item0,index0) in data">
        <tr
          v-for="(item1,index1) in item0.question_id.length!==0?item0.question_id.length:1"
          :key="index1+'-'+index0"
        >
          <td
            v-if="index1 === 0"
            :rowspan="item0.question_id.length!==0?item0.question_id.length:1"
          >A{{index0+1}}{{index1+1}}</td>
          <td
            v-if="index1 === 0 && item0.asd"
            :rowspan="item0.lengths?item0.lengths:item0.question.length"
          >B{{index0+1}}{{index1+1}}({{item0.lengths}})+({{item0.question.length}})</td>
          <td
            v-if="index1 === 0"
            :rowspan="item0.question_id.length!==0?item0.question_id.length:1"
          >C-{{index0+1}}{{index1+1}}</td>
          <td
            v-if="index1 === 0"
            :rowspan="item0.question_id.length!==0?item0.question_id.length:1"
          >D-{{item0.result_record}}</td>
          <td>E-{{index0+1}}{{index1+1}}</td>
          <td>F-{{index0+1}}{{index1+1}}</td>
          <td>G-{{index0+1}}{{index1+1}}</td>
          <td>H-{{index0+1}}{{index1+1}}</td>
        </tr>
      </template>
    </table>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { Message } from 'element-ui';

const components = {};

@Component({
  components,
})
export default class Dashboard extends Vue {
  data: any = [];

  ddd: any = [
    {
      question: [
        '安全问题安安全问题安安全问题',
        '333',
        '1231',
        '999',
      ],
      result_record: '123',
      eval_target_num: 'a)',
      eval_target_content:
        '机房出入口应安排专人值守，控制、鉴别和记录进入的人员。',
      id: 28,
      severity: [2, 3, 2, 2],
      security_control_point: '物理访问控制',
      suggest: ['安全', '444', '1241', '9999'],
      question_id: [57, 58, 61, 73],
    },
    {
      question: ['211', 'asdfas'],
      result_record:
        'a) 应将主要设备放置在机房内。a) 应将主要设备放置在机房内。a) 应将主要设备放置在机房内。a) 应将主要设备放置在机房内。',
      eval_target_num: 'a)',
      eval_target_content: '应将主要设备放置在机房内。',
      id: 38,
      severity: [2, 2],
      security_control_point: '防盗窃和防破坏',
      suggest: ['231231', 'asdfas'],
      question_id: [74, 75],
    },
    {
      question: ['asdf'],
      result_record: '234',
      eval_target_num: 'a)',
      eval_target_content: '机房应设置灭火设备和火灾自动报警系统。',
      id: 37,
      severity: [2],
      security_control_point: '防火',
      suggest: ['asdfsa'],
      question_id: [128],
    },
    {
      question: [],
      result_record:
        '防水和防潮防水和防潮防水和防潮防水和防潮防水和防潮防水和防潮防水和防潮防水和防潮防水和',
      eval_target_num: 'b)',
      eval_target_content: '应采取措施防止雨水通过机房窗户、屋顶和墙壁渗透。',
      id: 39,
      severity: [],
      security_control_point: '防水和防潮',
      suggest: [],
      question_id: [],
    },
    {
      question: [],
      result_record: 'asfdsadf',
      eval_target_num: 'a)',
      eval_target_content: '关键设备应采用必要的接地防静电措施。',
      id: 40,
      severity: [],
      security_control_point: '防静电',
      suggest: [],
      question_id: [],
    },
    {
      question: [],
      result_record: 'asdfas',
      eval_target_num: 'a)',
      eval_target_content: '应在机房供电线路上配置稳压器和过电压防护设备。',
      id: 52,
      severity: [],
      security_control_point: '电力供应',
      suggest: [],
      question_id: [],
    },
    {
      question: [],
      result_record: 'asdf',
      eval_target_num: 'b)',
      eval_target_content:
        '应提供短期的备用电力供应，至少满足关键设备在断电情况下的正常运行要求。',
      id: 53,
      severity: [],
      security_control_point: '电力供应',
      suggest: [],
      question_id: [],
    },
  ];

  mrhFormatData(data: any) {
    data.map((it: any) => {
      it.asd = true;
      return it;
    });
    for (let i = 0, len = data.length; i < len;) {
      data[i].asd = true;
      const item = data[i];
      item.lengths = item.question_id.length !== 0 ? item.question_id.length : 1;
      item.questionLengths = item.question_id.length !== 0 ? item.question_id.length : 1;
      let j = i + 1;
      for (; j < len; j += 1) {
        const next = data[j];
        if (next.security_control_point !== item.security_control_point) {
          next.asd = true;
          break;
        }
        item.lengths += next.question_id.length !== 0 ? next.question_id.length : 1;
        next.asd = false;
      }
      i = j;
    }
    for (let index = 0; index < data.length; index += 1) {
      const element = data[index];
    }
    return data;
  }

  mounted() {
    this.data = this.mrhFormatData(this.ddd);
  }
}
</script>
<style lang="scss" scoped>
.tmpl {
  table {
    border-collapse: collapse;
    border: 1px solid #ddd;
    width: 80vw;
    margin: 0 auto;
    tr {
      border: 1px solid #ddd;
      td {
        border: 1px solid #ddd;
      }
      th {
        border: 1px solid #ddd;
      }
    }
  }
}
</style>

<style scoped>
.main-body {
  /* 加上这个才会有当数据充满整个屏幕，可以进行上拉加载更多的操作 */
  overflow: scroll;
}
</style>
